<template>
	<view class="sxran-im-login"   :class="[$Im.getTheme()]">
		<view class="sxran-im-login-body">
			<k-card :rotate='rotate'>
				<template v-slot:header>
				</template>
				<template v-slot:front>
					<view class="content-back">
						<view class="sxran-im-log-content">
							<sxran-im-text class="log-text" text='sxran' size="60" bold></sxran-im-text>
						</view>
						<k-login @turnover='turnover'></k-login>
					</view>
				</template>
				<template v-slot:back>
					<view class="content-back">
						<view class="sxran-im-log-content">
							<sxran-im-text class="log-text" text='sxran' size="60" bold></sxran-im-text>
						</view>
						<k-register @turnover='turnover' @ok='ok'></k-register>
					</view>
				</template>
			</k-card>

		</view>
	</view>
</template>

<script>
	import kCard from './card.vue';
	import kLogin from './login.vue';
	import kRegister from './register.vue';
	export default {
		name: 'sxran-im-login',
		components: {
			kCard,
			kLogin,
			kRegister
		},
		data() {
			return {
				account: '',
				password: '',
				rotate: false
			}
		},
		methods: {
			inputAccount(value) {
				this.account = value;
			},
			inputPassword(value) {
				this.password = value;
			},
			turnover() {
				this.rotate = !this.rotate;
			},
			ok(){
				this.turnover()
			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-login {
		height: 100vh;
		width: 100vw;
		display: flex;
		overflow: hidden;
		background-color: var(--uni-bg-color);
		.sxran-im-login-body {
			flex-grow: 1;
			flex-shrink: 1;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.sxran-im-log-content {
				margin-bottom: 50px;
				
				.log-text {
					text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
				}
			}
			.content-back{
				display: flex;
				flex-direction: column;
				align-items: center;
				border: 1px solid red;
				border-radius: $uni-border-radius-lg;
				padding: 60rpx 60rpx;
				background: rgba(255, 255, 255, .1);
				backdrop-filter: blur(5px);
				box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
				border: 1px solid rgba(255, 255, 255, .1);
				border-right: 1px solid rgba(255, 255, 255, .2);
				border-bottom: 1px solid rgba(255, 255, 255, .2);
			}

		}
	}
</style>